<!--
	教务管理员--课程管理界面
-->
<template>
<div class="homework-manage-box">
<el-tabs
closable
v-model="nowTabs"
@tab-remove="removeTab"
>
<el-tab-pane label="课程列表" name="1">
	<!-- 顶部按钮 start -->
	<div class="top-box">
		<el-button type="primary" @click="addCourse">创建课程</el-button>
		<el-select v-model="chooseDepartmentId" @change="chooseDepartmentIdChange" clearable placeholder="选择学院">
			<el-option v-for="item in departmentList" :label="item.name" :value="item.id"></el-option>
		</el-select>
		<el-select v-model="chooseSubjectId" @change="chooseSubjectIdChange" clearable placeholder="选择专业">
			<el-option
				v-for="item in
			this.subjectList.filter((data)=> data.parentId==chooseDepartmentId)"
				:label="item.name" :value="item.id"></el-option>
		</el-select>
		<el-select v-model="chooseClassId" clearable placeholder="选择班级">
			<el-option
				v-for="item in
			this.classList.filter((data)=> data.parentId==chooseSubjectId)"
				:label="item.name" :value="item.id"></el-option>

		</el-select>
		<div width="120px"><el-input clearable v-model="search" placeholder="搜索名字" /></div>
	</div>
	<!-- 顶部按钮 end -->
	<!-- 数据表格 start -->
	<el-table
		ref="multipleTable"
		:data="this.tableData.filter(item=>{
				if(this.chooseDepartmentId==''&&this.chooseSubjectId==''&&this.chooseClassId==''&&this.search==''){
					return true;
				}
				let tag=false;
				// 判断选中的学院、专业、班级
				item.classRelationshipList.forEach(relationshipItem=>{
					// 1.判断班级
					if(this.chooseClassId!=''&&this.chooseClassId==relationshipItem.classId){
						tag=true;
					}else
						// 2.判断专业
					if(this.chooseClassId==''
						&&this.chooseSubjectId!=''&&this.chooseSubjectId==relationshipItem.subjectId){
						tag=true;
					}else
					// 3.判断学院
					if(this.chooseClassId=='' &&this.chooseSubjectId==''
						&&this.chooseDepartmentId!=''&&this.chooseDepartmentId==relationshipItem.departmentId){
						tag=true;
					}
				});
				// 判断搜索内容
				if(this.search!=''&&item.name.toLowerCase().indexOf(this.search.toLowerCase())!=-1){
					tag=true;
				}
				return tag;
			})"
		style="width: 100%"
		v-loading="isLoading"
		:border="true"
	>
		<el-table-column type="selection" width="55" />
		<el-table-column property="name" label="名称" />
		<el-table-column property="description" label="课程介绍" />
		<el-table-column property="syllabus" label="课程大纲" />
		<el-table-column label="教师" >
			<template #default="scope">
				<!-- 这一行的数据是整个课程的数据，这只要教师的数据 -->
				{{ scope.row.teacherList?scope.row.teacherList.map(item=>item.name).join(","):""}}
				<!-- array.join(",")join() 方法用于把数组中的所有元素放入一个字符串里，数组里的元素会通过指定的分隔符进行分隔。 -->
			</template>
		</el-table-column>
		<el-table-column label="参与班级">
			<template #default="scope">
				{{getClassListShowString(scope.row.classRelationshipList)}}
			</template>
		</el-table-column>
		<el-table-column label="详细" width="180px">
			<template #default="scope">
				<el-button size="mini" type="primary"
						   @click="openEditCourse(scope.$index, scope.row)">编辑</el-button>
				<el-button size="mini" type="success"
						   @click="handleEdit1(scope.$index, scope.row)">详细</el-button>

			</template>
		</el-table-column>
	</el-table>
	<!-- 数据表格 end -->
	<!-- 底部批量操作 start -->
	<div style="margin-top: 20px">
		批量操作
		<el-button type="primary" @click="getFilterTableData">修改</el-button>
		<el-button type="danger" @click="">关闭</el-button>
	</div>
	<!-- 底部批量操作 end -->
</el-tab-pane>
<!-- 第二个 详细信息 start -->
<el-tab-pane
	v-for="item in tabsData"
	:key="item.name"
	:label="item.title"
	:name="item.name"
>
	<lzk-course-info :course="item.content"></lzk-course-info>

</el-tab-pane>
<!-- 第二个 详细信息 end -->
<!-- 第三个 导入用户 start -->
<el-tab-pane
	label="导入"
	name="3"
>
	<lzk-import-course style="width: 100%;height: 100%;"></lzk-import-course>
</el-tab-pane>
<!-- 第三个 导入用户 end -->
</el-tabs>
</div>

<!-- 修改基础信息的对话框 start -->
<el-dialog v-model="dialogChangeVisible" :title="'修改《'+thisEditCourse.name+'》基础信息'">
	<el-form :model="thisEditCourse">
		<el-form-item label="课程名称">
			<el-input v-model="thisEditCourse.name"></el-input>
		</el-form-item>
		<el-form-item label="课程介绍">
			<el-input v-model="thisEditCourse.description"></el-input>
		</el-form-item>
		<el-form-item label="课程大纲">
			<el-input v-model="thisEditCourse.syllabus"></el-input>
		</el-form-item>
	</el-form>
	<template #footer>
	  <span class="dialog-footer">
		<el-button @click="closeDialog">取消</el-button>
		<el-button type="primary" @click="chengeEditCourseBaseInfo">确定</el-button>
	  </span>
	</template>
</el-dialog>
<!-- 修改基础信息的对话框 end -->

</template>

<script>
import axios from "@/plugins/axios";
import ipconfig from "@/utils/ipconfig";
import {ElMessage} from "element-plus"
import CourseInfo from "@/views/educationalAdmin/courseManage/CourseInfo";
import ImportCourse from "@/views/educationalAdmin/courseManage/ImportCourse";

export default {
	name: "CourseManage",
	data(){
		return {
			tabsData:[],
			nowTabs:'1',
			/**
			 * 表格数据，存放课程列表
			 *
			 */
			tableData:[],
			/**
			 * 控制加载效果显示
			 */
			isLoading:true,
			/*
			* 学院列表
			* */
			departmentList:[],
			/*
			* 选中的学院id
			* */
			chooseDepartmentId:'',
			/*
			* 专业列表
			* */
			subjectList:[],
			/*
			* 选中的专业id
			* */
			chooseSubjectId:'',
			/*
			* 班级列表
			* */
			classList:[],
			/*
			* 选中的班级id
			* */
			chooseClassId:'',
			/*
			* 搜索的内容
			* */
			search:"",
			/*
			* 控制修改对话框显示
			* */
			dialogChangeVisible:false,
			/*
			* 当前编辑的课程
			* */
			thisEditCourse:{},

		}
	},
	methods:{
		/*
		* 这里使用工具类的方法，在递归时会找不到自己，所以在这定义，后面解决
		* */
		deepClone(obj){
			let result = Array.isArray(obj) ? [] : {};
			for (let key in obj) {
				if (typeof obj[key] === 'object' && obj[key] !== null) {
					result[key] = this.deepClone(obj[key]); //递归复制
				} else {
					result[key] = obj[key];
				}
			}
			return result;
		},
		/**
		 * 导入到详细界面
		 * @param index
		 * @param value 在数据列表中，这一行的数据
		 */
		handleEdit1(index, value){
			// 这里用深拷贝 这样赋值才不会修改原来的
			this.thisEditCourse=this.deepClone(value);
			// 把index值赋值到属性上，后面修改的时候用得到
			// this.thisEditCourse.index=index;
			// this.dialogChangeVisible=true;
			this.tabsData[0]={
				title:'《'+this.thisEditCourse.name+'》',
				name:"2",
				content:this.thisEditCourse
			};
			this.nowTabs="2";

		},
		/*
		* 打开编辑对话框
		* */
		openEditCourse(index, value){
			// 这里用深拷贝 这样赋值才不会修改原来的
			this.thisEditCourse=this.deepClone(value);
			// 把index值赋值到属性上，后面修改的时候用得到
			this.thisEditCourse.index=index;
			this.dialogChangeVisible=true;
		},
		/**
		 * 关闭对话框
		 */
		closeDialog(){
			// 1.清空当前编辑的对象数据
			this.thisEditCourse={};
			// 2.关闭显示
			this.dialogChangeVisible=false;
		},
		/**
		 * 学院选中事件
		 * @param value 当前选中的值
		 */
		chooseDepartmentIdChange(value){
			// 要清除专业和班级的信息，不然有显示问题
			this.chooseSubjectId='';
			this.chooseClassId='';
		},
		/**
		 * 专业选中事件
		 * @param value
		 */
		chooseSubjectIdChange(value){
			// 清除班级信息，不然有显示问题
			this.chooseClassId='';
		},
		/**
		 * 获取显示的班级列表文字
		 * @param relationshipList
		 * @returns {*}
		 */
		getClassListShowString(relationshipList){
			return relationshipList.map(relationshipItem=>{
				let str="";
				this.classList.forEach(classItem=>{
					if(relationshipItem.classId==classItem.id){
						str+=classItem.name;
					}
				});
				return str;
			}).join(",");
		},
		/*
		* 获取筛选的数据
		* */
		getFilterTableData(){
			let array=this.tableData.filter(item=>{

				if(this.chooseDepartmentId==''&&this.chooseSubjectId==''&&this.chooseClassId==''&&this.search==''){
					return true;
				}
				let tag=false;
				// 判断选中的学院、专业、班级
				item.classRelationshipList.forEach(relationshipItem=>{
					// 1.判断班级
					if(this.chooseClassId!=''&&this.chooseClassId==relationshipItem.classId){
						tag=true;
					}else
						// 2.判断专业
					if(this.chooseClassId==''
						&&this.chooseSubjectId!=''&&this.chooseSubjectId==relationshipItem.subjectId){
						tag=true;
					}
					// 3.判断学院
					if(this.chooseClassId=='' &&this.chooseSubjectId==''
						&&this.chooseDepartmentId!=''&&this.chooseDepartmentId==relationshipItem.departmentId){
						tag=true;
					}

				});
				// 判断搜索内容
				if(this.search!=''&&item.name.indexOf(this.search)!=-1){
					tag=true;
					console.log(item.name)
				}
				return tag;
			});
			console.log(array);
		},
		/*
		* 确定修改课程的基础信息
		* */
		chengeEditCourseBaseInfo(){
			axios.post(ipconfig.address+"/course/updateCourse",{
				...this.thisEditCourse
			}).then((response)=>{
				if(response.data.code==200){
					location.reload();
				}else{
					ElMessage.warning(response.data.message);
				}
			}).catch((error)=>{
			    console.log(error);
			});
		},
		/**
		 * 删除tabs
		 * @param targetName 被删除的标签
		 */
		removeTab(targetName){
			if(targetName=='1'){
				console.log(targetName);
			}else{
				this.tabsData={};
				this.nowTabs='1';
			}
		},
		/**
		 * 新建课程，就是打开一个空的
		 */
		addCourse(){
			this.thisEditCourse={};
			this.tabsData[0]={
				title:"新增课程",
				name:"2",
				content:this.thisEditCourse
			};
			this.nowTabs="2";
		},

	},
	beforeCreate() {
		// 获取展示的数据
		axios.get(ipconfig.address+"/course/courseManageList").then((response)=>{
			if(response.data.code==200){
				this.tableData=response.data.data;
				// 加载效果关了
				this.isLoading=false;
			}else {
				ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
		    console.log(error);
		});
		// 这里获取学院列表
		axios.get(ipconfig.address+"/common/departmentList").then((response)=>{
			if(response.data.code==200){
				this.departmentList=response.data.data;
			}
		}).catch((error)=>{
			console.log(error);
		});
		// 这里获取专业列表
		axios.get(ipconfig.address+"/common/dictionary?decription=专业").then((response)=>{
			if(response.data.code==200){
				this.subjectList=response.data.data;
			}else{
				ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
			console.log(error);
		});
		// 这里获取班级列表
		axios.get(ipconfig.address+"/common/dictionary?decription=班级").then((response)=>{
			if(response.data.code==200){
				this.classList=response.data.data;
			}else{
				ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
			console.log(error);
		});
	},
	components:{
		"lzk-course-info":CourseInfo,
		"lzk-import-course":ImportCourse,
	}
}
</script>

<style lang="scss" scoped>
.homework-manage-box{
	width: 100%;
	height: 97%;

	.top-box{
		margin-top: 20px;margin-bottom: 20px;
		display: flex;

		div{
			margin-left: 10px;
		}
	}
}

</style>
